Quibbox.EditMode = function ()
{
	/**
	 * Catalog of content types that users can choose from when adding a block.
	 */
	var catalog = [
		{
			id: 'general',
			title: 'General Content',
			iconCls: 'icon-apps',
			cls: 'active',
			modules: []
		},{
			id: 'other',
			title: 'Other',
			iconCls: 'icon-apps',
			modules: []
		}
	];
	
	function addBlock()
	{
		var addLink = $(this);
		var areaName = $(this).parent().attr('areaName');
		
		var win = new Ext.Window({
			title: 'Add Content',
			closable: true,
			width: 290,
			height: 182,
			//border: false,
			plain: true,
			layout: 'fit',
			
			items: {
				html: '<div class="createContent">Create a new content block</div><div class="selectContent">Add an existing content block</div>',
			}
		});

		win.show(this);
		
		$('.createContent').click(function () {
			win.close();
			addNewBlock(addLink);
		});
		
		$('.selectContent').click(function () {
			win.close();
			Ext.Msg.alert('Sorry', 'Unfortunately, this feature is not available yet.');
		});
	};
	
	function addNewBlock(addLink)
	{
		var areaName = addLink.parent().attr('areaName');
		
		var html  = '<div id="samples">';
		    html += '	<div id="samples-cb">';
		    html += '		<img src="http://extjs.com/s.gif" class="normal-view" title="Full view with descriptions"/>';
		    html += '		<img src="http://extjs.com/s.gif" class="condensed-view" title="Condensed view" />';
		    html += '		<img src="http://extjs.com/s.gif" class="mini-view" title="Mini view" />';
		    html += '	</div>';
		    html += '	<div id="sample-menu"><div id="sample-menu-inner"></div></div>';
    	    html += '	<div id="sample-box"><div id="sample-box-inner"></div></div>';
		    html += '</div>';
		
		var win = new Ext.Window({
			title: 'Select Content Type',
			closable: true,
			resizable: false,
			width: 920,
			height: 406,
			//border: false,
			plain: true,
			layout: 'fit',
			
			items: {
				html: html
			}
		});
	    
		win.show(this);
		
		
		
		var menu = Ext.get('sample-menu-inner'), 
		ct = Ext.get('sample-box-inner');
	
		var tpl = new Ext.XTemplate(
			'<div id="sample-ct">',
				'<tpl for=".">',
				'<div><a name="{id}" id="{id}"></a><h2><div unselectable="on">{title}</div></h2>',
				'<dl>',
					'<tpl for="modules">',
						'<dd quib:module="{module}"><img title="{text}" src="'+Quibbox.Url.local('modules/{module}/icon.png')+'"/>',
							'<div><h4>{text}</h4><p>{desc}</p></div>',
						'</dd>',
					'</tpl>',
				'<div style="clear:left"></div></dl></div>',
				'</tpl>',
			'</div>'
		);
		tpl.overwrite(ct, catalog);
		
		
		var tpl2 = new Ext.XTemplate(
			'<tpl for="."><a href="#{id}" hidefocus="on" class="{cls}" id="a4{id}"><img src="http://extjs.com/s.gif" class="{iconCls}">{title}</a></tpl>'
		);
		tpl2.overwrite(menu, catalog);
		
		function calcScrollPosition(){
			var found = false, last;
			ct.select('a[name]', true).each(function(el){
				last = el;
				if (el.getOffsetsTo(ct)[1] > -50) {
					activate(el.id)
					found = true;
					return false;
				}
			});
			if (!found) {
				activate(last.id);
			}
		}
		
		var bound;
		function bindScroll(){
			ct.on('scroll', calcScrollPosition, ct, {buffer:250});
			bound = true;
		}
		function unbindScroll(){
			ct.un('scroll', calcScrollPosition, ct);
			bound = false;
		}
		function activate(id){
			Ext.get('a4' + id).radioClass('active');
		}
		
		ct.on('mouseover', function(e, t){
			if(t = e.getTarget('dd')){
				Ext.fly(t).addClass('over');
			}
		});
		ct.on('mouseout', function(e, t){
			if((t = e.getTarget('dd')) && !e.within(t, true)){
				Ext.fly(t).removeClass('over');
			}
		});
		ct.on('click', function(e, t){
			if ((t = e.getTarget('dd', 5)) && !e.getTarget('a', 3)) {
				var module = Ext.fly(t).getAttributeNS('quib', 'module');
				if (Quibbox.EditMode.modules[module] && Quibbox.EditMode.modules[module].create) {
					Quibbox.EditMode.modules[module].create(addLink);
					win.close();
				}
			} else if(t = e.getTarget('h2', 3, true)) {
				t.up('div').toggleClass('collapsed');
			}		
		});
		
		menu.on('click', function(e, t){
			e.stopEvent();
			if((t = e.getTarget('a', 2)) && bound){
				var id = t.href.split('#')[1];
				var top = Ext.getDom(id).offsetTop;
				Ext.get(t).radioClass('active');
				unbindScroll();
				ct.scrollTo('top', top, {callback:bindScroll});
			}
		});
		
		Ext.get('samples-cb').on('click', function(e){
			var img = e.getTarget('img', 2);
			if(img){
				Ext.getDom('samples').className = img.className;
				calcScrollPosition.defer(10);
			}
		});
		
		bindScroll();
	}
	
	return {
		init: function ()
		{
			var areas = $('.area.editable');
			
			areas.find('.addBlock').click(addBlock);
			
			// Initialize modules
			jQuery.each(Quibbox.EditMode.modules, function (i, val) {
				val.init(areas);
			});
			
			jQuery('body').append('<div id="quibbox_edit_toolbar"></div>');
			
			var tb = new Ext.Toolbar();
			tb.render('quibbox_edit_toolbar');
			tb.add({
				xtype: "tbtext",
				text: '<img src="' + Quibbox.Url.local('gx/logo.png') + '" alt="Quibbox Admin" style="margin-bottom: -4px" />'
			},{
				xtype: 'tbfill'
			},{
				xtype: "tbtext",
				text: 'moon@justmoon.de'
			},{
				text: 'Logout'
			});
		},
		
		addToCatalog: function (category, definition)
		{
			for(var i = 0, c; c = catalog[i]; i++){
		        if (c.id == category) {
		        	c.modules.push(definition);
		        	return;
		        }
		    }
		},
		
		modules: {}
	}
}();

$(Quibbox.EditMode.init);